<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-800 text-white flex flex-col">

    <!-- 主内容区 -->
    <main class="flex-grow flex flex-col items-center justify-center px-6 py-12">
      <div class="max-w-4xl w-full bg-white/10 backdrop-blur-md rounded-2xl p-8 shadow-2xl border border-white/20 transform transition-all duration-500 hover:shadow-cyan-500/20">
        <!-- 欢迎信息 -->
        <div class="text-center mb-12">
          <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 animate-pulse">
            欢迎使用志愿活动管理系统
          </h2>
          <p class="text-xl text-white/80 max-w-2xl mx-auto">
            在这里，您可以高效管理志愿活动、志愿者信息和报名情况
          </p>
        </div>

        <!-- 当前时间显示 -->
        <div class="bg-white/5 rounded-xl p-8 border border-white/10 shadow-lg">
          <div class="flex flex-col items-center">
            <p class="text-lg text-white/70 mb-2">当前时间</p>
            <div class="text-[clamp(2.5rem,8vw,5rem)] font-light tracking-wider mb-4">
              {{ currentTime }}
            </div>
            <div class="text-xl text-white/70">
              {{ currentDate }}
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="bg-white/10 backdrop-blur-md border-t border-white/20 py-4 px-6 text-center text-sm text-white/60">
      <p>© 2025 志愿活动管理系统 | 版权所有</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 当前时间和日期
const currentTime = ref('');
const currentDate = ref('');
let timer = null;

// 格式化数字，补零
const formatNumber = (num) => {
  return num < 10 ? `0${num}` : num;
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  
  // 格式化时间
  const hours = formatNumber(now.getHours());
  const minutes = formatNumber(now.getMinutes());
  const seconds = formatNumber(now.getSeconds());
  currentTime.value = `${hours}:${minutes}:${seconds}`;
  
  // 格式化日期
  const year = now.getFullYear();
  const month = formatNumber(now.getMonth() + 1);
  const day = formatNumber(now.getDate());
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekDay = weekDays[now.getDay()];
  currentDate.value = `${year}年${month}月${day}日 ${weekDay}`;
};

// 生命周期钩子
onMounted(() => {
  // 立即更新一次时间
  updateTime();
  // 每秒更新一次
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  // 清除定时器
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
/* 自定义动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.animate-pulse {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>    